<template>
  <div id="send">
    <el-form class="container" ref="form" :model="form" label-width="80px">
      <el-form-item label="寄件人">
        <el-input v-model="form.sender" placeholder="寄件人id"></el-input>
      </el-form-item>
      <el-form-item label="寄件地址">
        <el-input v-model="form.start_address" placeholder="发货地址"></el-input>
      </el-form-item>
      <el-form-item label="收件人">
        <el-input v-model="form.recipient" placeholder="收件人姓名"></el-input>
      </el-form-item>
      <el-form-item label="收件地址">
        <el-input v-model="form.end_address" placeholder="目的地址"></el-input>
      </el-form-item>
      <el-form-item label="包裹类型">
        <el-input v-model="form.type" placeholder="(普通包裹、大盒子、小盒子)"></el-input>
      </el-form-item>
      <el-form-item label="包裹重量">
        <el-input v-model="form.weight" placeholder="数字，不需要单位"></el-input>
      </el-form-item>
      <el-form-item label="包裹期限">
        <el-input v-model="form.timeliness" placeholder="送达时间(单位：天）"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import * as requires from '../network/require'

export default {
  name: "Send",
  data() {
    return {
      form: {
        end_address: "",
        recipient: '',
        sender: '',
        start_address: "",
        timeliness: '',
        type: '',
        weight: '',
      }
    }
  },
  methods: {
    async onSubmit() {
      try {
        const res = await requires.postPackage(this.form);
        const data = res.data;
        alert(data)
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    cancel() {
      let form = {
        end_address: "",
        recipient: '',
        sender: '',
        start_address: "",
        timeliness: '',
        type: '',
        weight: '',
      }
      this.form = form;
    }
  }
}
</script>

<style scoped>
#send {
  height: 100%;
  width: 100%;
}

.container {
  padding-top: 10%;
  margin: auto;
  width: 30%;
}
</style>
